<!--
    @ author:小恶魔
    @ datetime: 2020-7-26
 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>积分商城</title>

    <link rel="stylesheet" href="/static/logistics/css/bootstrap4.5.css">
    <link rel="stylesheet" href="/static/admin/lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/static/logistics/css/toast.css">
</head>
<body>
<!-- 头部文件 -->
<div th:replace="~{/logistics/header::html}"></div>
<div class="bg-light" id="integralMallApp">
    <div class="container">
        <div class="row">
            <!-- 面包屑导航 -->
            <div th:replace="~{/logistics/navigation::html}"></div>

            <div class="col-sm-12 p-3 rounded" style="background-color: white;margin-bottom: 35%;">

                <div class="row p-2">
                    <div v-for="(integralMall,index) in IntegralMallList" v-if="integralNumber >= integralMall.integralPrice" class="col-sm-4" >
                        <div class="card bg-dark text-white border-0" style="background: linear-gradient(to left, #AE80FF, #E71ADF);">
                            <div class="card-body">
                                <h2>￥{{integralMall.money}}</h2>
                                <h2>{{integralMall.integralMallName}}</h2>
                                <button type="button" class="btn btn-outline-light pull-right" @click="integralExchange(index)">立即兑换</button>
                            </div>
                        </div>

                    </div>

                    <div v-else class="col-sm-4">
                        <div class="card bg-dark text-white border-0" style="background: linear-gradient(to left, #A7A7A7, #D5D5D5);">
                            <div class="card-body">
                                <h2>￥{{integralMall.money}}</h2>
                                <h2>{{integralMall.integralMallName}}</h2>
                                <button type="button" class="btn btn-outline-light pull-right">积分不足</button>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
        </div>
    </div>
</div>


<div th:replace="~{/logistics/footer::html}"></div>
<script src="/static/logistics/js/jquery-2.2.4.js"></script>
<script src="/static/logistics/gijgo-combined-1.9.13/js/gijgo.min.js" type="text/javascript"></script>

<script src="/static/logistics/js/bootstrap4.5.js"></script>
<script src="/static/logistics/js/vue.js"></script>
<script src="/static/logistics/js/axios.min.js"></script>
<script src="/static/logistics/home/js/integralMall.js"></script>
<script src="/static/logistics/js/toast.js"></script>
</body>
</html>
